<template>
  <a-modal
    modal-class="template-management-chart-modal"
    fullscreen
    v-model:visible="visible"
    title="AI模板使用统计：统计历史所有记录"
    :footer="false"
    title-align="start"
    :render-to-body="false"
  >
    <div
      :loading="loading"
      :style="{
        boxSizing: 'border-box',
        width: '100%',
        height: '100%',
        padding: '20px'
      }"
    >
      <a-row :gutter="20" :style="{ marginBottom: '20px' }">
        <a-col :span="12">
          <a-card
            :bordered="false"
            style="width: '100%'; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); border-radius: 8px"
          >
            <div class="card-content">
              <div class="pi-charts-item">
                <div class="charts-title">文章全部模板</div>
                <pie-charts v-if="!loading" :ref="setItemRef" :data="articleData"></pie-charts>
              </div>
              <span class="spliter"></span>
              <div class="pi-charts-item">
                <div class="charts-title">资讯全部模板</div>
                <pie-charts v-if="!loading" :ref="setItemRef" :data="seekleData"></pie-charts>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card
            :bordered="false"
            style="width: '100%'; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); border-radius: 8px"
          >
            <div class="pi-charts-item">
              <div class="charts-title">不可用原因统计</div>
              <pie-charts :legend="reasonLengend" v-if="!loading" :ref="setItemRef" :data="reasonData"></pie-charts>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="20" style="height: calc(100% - 232px)">
        <a-col :span="24" style="height: 100%">
          <a-tabs v-model:active-key="activeKey" style="background-color: #fff" default-active-key="2">
            <a-tab-pane v-for="item in tabList" :key="item.id" :title="item.name"></a-tab-pane>
          </a-tabs>
          <div class="card-content-outer" v-show="activeKey == '1'">
            <rankCard title="完全通过率" :dataArr="passRankArr" class="card-content-item"></rankCard>
            <rankCard title="微改率" :dataArr="editRankArr" class="card-content-item"></rankCard>
            <rankCard title="不可用率" :dataArr="notRankArr" class="card-content-item"></rankCard>
          </div>
          <div class="card-content-outer" v-show="activeKey == '2'">
            <rankCard title="完全通过率" :dataArr="passRankArr2" class="card-content-item"></rankCard>
            <rankCard title="微改率" :dataArr="editRankArr2" class="card-content-item"></rankCard>
            <rankCard title="不可用率" :dataArr="notRankArr2" class="card-content-item"></rankCard>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'
import { getStatusOptions, templateTotal } from '@/apis'
import pieCharts from './pieCharts.vue'
import rankCard from './rankCard.vue'

// const props = defineProps({
//   tabList: {
//     type: Array,
//     default: []
//   }
// })
const chartRef = ref([])
const setItemRef = (el) => {
  chartRef.value.push(el)
}

const activeKey = ref('1')
const visible = ref(false)
const detailId = ref('')

const articleData = ref([])
const seekleData = ref([])
const reasonData = ref([])

const passRankArr = ref([])
const editRankArr = ref([])
const notRankArr = ref([])

const passRankArr2 = ref([])
const editRankArr2 = ref([])
const notRankArr2 = ref([])

const reasonLengend = ref([])
// 获取状态下拉
const tabList = ref([])
const getStatusOption = async (visible) => {
  if (!visible) return
  let res = await getStatusOptions()
  if (res.code == 1) {
    tabList.value = res.data.type || []
    activeKey.value = tabList.value?.[0]?.id || 0
  }
}
// 获取数据
const loading = ref(false)
const getData = async () => {
  loading.value = true
  let res = await templateTotal()
  loading.value = false
  let data = res.data || {}
  articleData.value = [
    { value: data.article_template_by_law, name: '全部通过率' },
    { value: data.article_template_by_edit, name: '微改率' },
    { value: data.article_template_by_not, name: '不可用率' }
  ]
  seekleData.value = [
    { value: data.seek_template_by_law, name: '全部通过率' },
    { value: data.seek_template_by_edit, name: '微改率' },
    { value: data.seek_template_by_not, name: '不可用率' }
  ]
  reasonData.value = [
    { value: data.reason_for_unavailability_1 || 0, name: '内容与关键词不符' },
    { value: data.reason_for_unavailability_2 || 0, name: '字数不达标' },
    { value: data.reason_for_unavailability_3 || 0, name: '首段语言不够精炼' },
    { value: data.reason_for_unavailability_4 || 0, name: '出现敏感词' },
    { value: data.reason_for_unavailability_5 || 0, name: '未回答标题内容' },
    { value: data.reason_for_unavailability_6 || 0, name: '文章格式与要求不符' }
  ]
  reasonLengend.value = [
    {
      orient: 'vertical',
      left: '40%',
      top: 'center',
      itemWidth: 8,
      itemHeight: 8,
      icon: 'circle',
      textStyle: {
        fontSize: 12, // 字体大小
        color: '#999' // 字体颜色
      },
      formatter: function (name) {
        const total = reasonData.value.reduce((sum, item) => sum + item.value, 0)
        const current = reasonData.value.find((item) => item.name === name)
        const percent = (current?.value / total && ((current?.value / total) * 100).toFixed(2)) || 0
        return `${name}  ${percent}%`
      },
      data: ['内容与关键词不符', '首段语言不够精炼', '未回答标题内容']
    },
    {
      orient: 'vertical',
      left: '70%',
      top: 'center',
      itemWidth: 8,
      itemHeight: 8,
      icon: 'circle',
      textStyle: {
        fontSize: 12, // 字体大小
        color: '#999' // 字体颜色
      },
      formatter: function (name) {
        const total = reasonData.value.reduce((sum, item) => sum + item.value, 0)
        const current = reasonData.value.find((item) => item.name === name)
        const percent = (current?.value / total && ((current?.value / total) * 100).toFixed(2)) || 0
        return `${name}  ${percent}%`
      },
      data: ['字数不达标', '出现敏感词', '文章格式与要求不符']
    }
  ]
  passRankArr.value = (data.article_by_law_list || []).map((dd, index) => {
    return {
      rank: index + 1,
      name: dd.name,
      ratio: (dd.rate || 0) * 100 + '%'
    }
  })
  editRankArr.value = (data.article_by_edit_list || []).map((dd, index) => {
    return {
      rank: index + 1,
      name: dd.name,
      ratio: (dd.rate || 0) * 100 + '%'
    }
  })
  notRankArr.value = (data.article_by_not_list || []).map((dd, index) => {
    return {
      rank: index + 1,
      name: dd.name,
      ratio: (dd.rate || 0) * 100 + '%'
    }
  })
  passRankArr2.value = (data.seek_by_law_list || []).map((dd, index) => {
    return {
      rank: index + 1,
      name: dd.name,
      ratio: (dd.rate || 0) * 100 + '%'
    }
  })
  editRankArr2.value = (data.seek_by_edit_list || []).map((dd, index) => {
    return {
      rank: index + 1,
      name: dd.name,
      ratio: (dd.rate || 0) * 100 + '%'
    }
  })
  notRankArr2.value = (data.seek_by_not_list || []).map((dd, index) => {
    return {
      rank: index + 1,
      name: dd.name,
      ratio: (dd.rate || 0) * 100 + '%'
    }
  })
}
const show = (id: string) => {
  visible.value = true
  getStatusOption(true)
  getData()

  nextTick(() => {
    chartRef.value.forEach((element) => {
      element?.resizeChart()
    })
  })
}
defineExpose({ show })
</script>

<style lang="scss" scoped>
:deep(.arco-collapse-item-content) {
  background: none;
}
</style>
<style lang="scss">
.template-management-chart-modal {
  .arco-modal-body {
    height: calc(100% - 48px);
    box-sizing: border-box;
  }
  .arco-modal-header {
    border: none;
    font-weight: bold;
  }
  .arco-modal-body {
    padding: 0;
  }
  .pi-charts-item {
    height: 180px;
    width: 100%;
  }
  .spliter {
    display: inline-block;
    height: 180px;
    width: 1px;
    background: #e8e8e8;
    margin: 0 20px;
    // border-left: 1px solid #e8e8e8;
  }
  .card-content {
    display: flex;
    .pi-charts-item {
      flex: 1;
    }
  }
  .card-content-outer {
    height: calc(100% - 56px);
    display: flex;
    // margin-top: 20px;
    .card-content-item {
      flex: 1;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      & + .card-content-item {
        margin-left: 20px;
      }
      .arco-card-body {
        height: calc(100% - 80px);
        box-sizing: border-box;
        .card-content-inner {
          height: 100%;
          .card-list {
            height: calc(100% - 44px);
            overflow: auto;
          }
        }
      }
    }
  }
}
</style>
